
Vue.component('chartComponent',{
	props:{
		
	},
	'template':`
		<div>
			<slot name="line"></slot>
			<div :id="chartId" class="chartBox" ></div>
			<slot name="num"></slot>
		</div>
	`,
	data:function(){
		return {
			chartId:'chart_'+this.uuid(8, 64),
			myChart:null,
			dataX:[1,2,3,4,5,6]
		}
	},
	watch:{

	},
	mounted:function(){
		var _this=this;
		this.$nextTick(function(){
			this.init();
			this.triggerEvent();
		});
	},
	methods:{
		update:function(){			
		},
		uuid:function(len, radix) {
			//uuid函数，为chart设置id熟悉
		  var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
		  var uuid = [],
		    i;
		  radix = radix || chars.length;
		  if (len) {
		    // Compact form
		    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
		  } else {
		    // rfc4122, version 4 form
		    var r;
		    // rfc4122 requires these characters
		    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
		    uuid[14] = '4';
		    // Fill in random data. At i==19 set the high bits of clock sequence as
		    // per rfc4122, sec. 4.1.5
		    for (i = 0; i < 36; i++) {
		      if (!uuid[i]) {
		        r = 0 | Math.random() * 16;
		        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
		      }
		    }
		  }
		  return uuid.join('');
		},
		//获取事件对象
		getEventObject:function(slotName){
			//将传过来的数据处理成echart需要的数据格式
			//输出x轴，y轴，legend属性
			var lines=this.$slots[slotName];
			var legend=[];
			var series=[];
			var ajaxData=[];
			var dataX=this.dataX;
			var timing=[];
			for(var i=0;i<lines.length;i++){
				//初始化图表相关的数据
				series.push({
					name:lines[i].data.attrs['name'],
					type:lines[i].data.attrs['type']
				});
				legend.push(lines[i].data.attrs.name);

				//ajax相关的数据
				ajaxData.push({
					url:lines[i].data.attrs['itemurl'],
					params:lines[i].data.attrs['params']
				});

				//定时轮询相关的数据
				timing.push(Number(lines[i].data.attrs['timing']))
			}

			return {
				series:series,
				legend:legend,
				ajaxData:ajaxData,
				timing:timing
			}
		},
		handleData:function(ajaxData,name,series){
			var _this=this;
			var URL='data';
			var success=function(res){
				series.data=res.data;
				console.log(series.data);
				_this.loadData(name,res.data);
			};
			var error=function(e){
				console.log(e);
			};
			this.$http.get(URL+ajaxData['url'],{}).then(success,error);
		},
		//触发事件
		triggerEvent:function(){
			var eventObject=this.getEventObject('line');
			var _this=this;
			var num=0;
			setInterval(function(){
				num++;
				num%=eventObject.ajaxData.length;
				_this.handleData(eventObject.ajaxData[num],eventObject.legend[num],eventObject.series[num]);
			},eventObject.timing[num]);	
		},
		init:function(){
			var chartData=this.getEventObject('line');
			var option={
			        title: {
			            text: 'chart组件示例'
			        },
			        tooltip: {},
			        legend: {
			            data:[]
			        },
			        xAxis: {
			            data: []
			        },
			        yAxis: {},
			        series: chartData.series,
			        //color:this.linestyle.lineColor
			};
			this.myChart= echarts.init(document.getElementById(this.chartId));
			this.showLoad();
			this.myChart.setOption(option);
		},
		showLoad:function(){
			var loadingConfig={
		      text: '',
		      color: '#b0e9fe',
		      textColor: '#000',
		      maskColor: 'rgba(255, 255, 255, 0)',
		      zlevel: 0
		    };
			this.myChart.showLoading(loadingConfig);
		},
		hideLoad:function(){
			this.myChart.hideLoading();
		},
		loadData:function(name,data){
			this.hideLoad();
			this.myChart.setOption({
		        series:[{
		        	name:name,
		        	data:data
		        }]
			})
		}
	}

})